import { Autoplay, Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import axios from "axios";
import 'swiper/css';
import 'swiper/css/pagination';
import './mainheader.scss'
import { SearchOutline } from 'antd-mobile-icons';
import React, { useState, useEffect } from "react";
import abc3 from '../../../img/dongtu.gif'
import abc4 from '../../../img/dongtu2.gif'
import abc5 from '../../../img/miaosha.png'
import abc6 from '../../../img/tu1.png'
import abc7 from '../../../img/tu2.png'
import abc8 from '../../../img/tu3.png'
import abc9 from '../../../img/tu4.png'
import abc10 from '../../../img/tu5.png'
import abc11 from '../../../img/tu6.png'
import abc12 from '../../../img/tu7.png'
import abc13 from '../../../img/xiaoxi.jpeg'
import abc14 from '../../../img/tuijian.jpeg'
import { useNavigate } from "react-router-dom";

function MainHeader(props) {

    const [myswiper, setMyswiper] = useState(null);
    const [swiperBg, setSwiperBg] = useState(0);

    let showType = true;
    const [listNav, setListNav] = useState([]);
    const navigate = useNavigate();

    useEffect(() => {
        //滚动事件
        // window.onscroll = () => {
        //     let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        //     if (scrollTop > 200) {
        //         this.state.myswiper.autoplay.stop();
        //     } else {
        //         this.state.myswiper.autoplay.start();

        //     }
        // }
        axios.post("https://srv.hotkidceo.com/appapi/api/root-ceo-content/hpPageConfigure/pageList", { channelId: "C06022632001", memberKey: 33294872 }).then(res => {
            console.log(res);

            setListNav(res.data.data[2].configureAttribute)

        })
        return () => { window.onscroll = undefined; }

    }, [])
    const goSearch = () => {

        // console.log(7);
        // console.log(this.props);
        navigate('/search');

    }
    return <>
        <div className='main_con' style={{ backgroundImage: `url(${props.swiperList[swiperBg].singleBackgroundURL})` }}>

            <div className={showType ? 'm_fixed' : ''} style={showType ? { backgroundImage: `url(${props.swiperList[swiperBg].singleBackgroundURL})` } : { backgroundImage: 'none' }}  >
                <div className="m_title">旺仔旺铺</div>
                <div className="m_search" onClick={goSearch} >
                    <SearchOutline /> &nbsp;
                    冻痴*6组合
                </div>
            </div>
            <Swiper className={showType ? "mainswiper ms-padding " : "mainswiper"}
                modules={[Pagination, Autoplay]}
                pagination={{ clickable: true }}
                autoplay={{ delay: 2000 }}
                loop={true}
                onSlideChange={(swiper) => {
                    console.log('slide change')
                    setSwiperBg(swiper.realIndex)
                }}
                onSwiper={(swiper) => setMyswiper(swiper)}
            >
                {
                    props.swiperList.map((item, index) => <SwiperSlide key={index}><img src={item.pictureURL} alt={item.pictureURL} /></SwiperSlide>)

                }

            </Swiper>
            <div className='nav_bar'>
                <div className='nav_bar_1'>
                    <ul>
                        {
                            listNav.map((item, index) => <li key={index}><img src={item.pictureURL} alt='item.pictureName'></img><br></br>
                                <p>{item.pictureName}</p></li>)
                        }
                    </ul>
                </div>

            </div>
            <div className='nav_img'><img src={abc3} alt={3} /></div>
            <div className='nav_img1'><img src={abc4} alt={3} /></div>
            <div className='nav_img2'>
                <img src={abc5} alt={3} />
                <div></div>
            </div>
            <div className='nav_img3'>
                <img src={abc6} alt={3} />
                <img src={abc7} alt={3} />
                <img src={abc8} alt={3} />
                <img src={abc9} alt={3} />
            </div>
            <div className='nav_img4'>
                <img src={abc10} alt={3} className='nav_img4-1' />
                <img src={abc11} alt={3} className='nav_img4-1' />
                <img src={abc12} alt={3} className='nav_img4-1' />
            </div>
            <div className='nav_img5'><img src={abc13} alt={3} /></div>
            <div className='nav_img6'><img src={abc14} alt={3} /></div>
        </div>

    </>
}


export default MainHeader;